$(function () {
    // $(".three-scroll").mCustomScrollbar({
    //     advanced: {
    //         autoExpandHorizontalScroll: true
    //     }
    // });
    $('.btn-group').on('click', 'a', function () {
        if (!$(this).index()) {
            $('#three').hide()
            $('#map').show()

        } else {
            $('#map').hide()
            $('#three').show()
        }
        $(this).addClass('active').siblings().removeClass('active');

    })

    showMap()

    var $root = $('#J_root');
    var data = getChildrenData.call($root)

    //  var data = $root.getChildrenData();
    if (data.length) {
        //    $root.addChildren(data);
        addChildren.call($root, data)

    } else {
        $('#root_icon').remove();
    }

    $('li>ul>li:visible').hide();

    $('#root_icon').on('click', function (e) {

        $(this).toggleClass('icon-open');
        $root.toggleClass('after-none');

        var children = $root.find('>ul>li');

        if (children.is(':visible')) {
            children.hide('fast');
        } else {
            children.show('fast');
        };

    });

    $('#root_icon').trigger('click')
        .addClass('icon-single-open');


    $('li >div>.icon').eq(1).trigger('click')

})

function showMap() {
    $.ajax({
        url: './aks.json',
        success: function (json) {
            echarts.registerMap('aks', json);
            var myChart = echarts.init(document.getElementById('map'));

            var geoCoordMap = {

                '阿克苏市': [
                    80.265214, 41.175029
                ],

                '新和县': [
                    82.616394, 41.555294
                ],
                '沙雅县': [82.793423, 41.229487]
            };

            var BJData = [
                [{
                    name: "阿克苏市"
                }, {
                    name: '新和县',
                    value: 628
                }],
                [{
                    name: "阿克苏市"
                }, {
                    name: '沙雅县',
                    value: 68
                }]
            ];

            var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var dataItem = data[i];
                    var fromCoord = geoCoordMap[dataItem[0].name];
                    var toCoord = geoCoordMap[dataItem[1].name];
                    if (fromCoord && toCoord) {
                        res.push({
                            fromName: dataItem[0].name,
                            toName: dataItem[1].name,
                            coords: [
                                fromCoord, toCoord
                            ],
                            value: [dataItem[1].value]
                        });
                    }
                }
                return res;
            };

            var color = ['#a6c84c', '#ffa022', '#46bee9'];
            var series = [];
            [
                ['阿克苏市', BJData]
            ].forEach(function (item, i) {
                series.push({
                    name: item[0] + ' Top10',
                    type: 'lines',
                    zlevel: 1,
                    effect: {
                        show: true,
                        period: 0,
                        trailLength: 0.7,
                        color: '#fff',
                        symbolSize: 3
                    },
                    lineStyle: {
                        normal: {
                            color: color[i],
                            width: 0,
                            curveness: 0.2
                        }
                    },
                    data: convertData(item[1])
                }, {
                    name: item[0] + '',
                    type: 'lines',
                    zlevel: 2,
                    symbol: [
                        'none', 'arrow'
                    ],
                    symbolSize: 10,
                    effect: {
                        show: true,
                        period: 6,
                        trailLength: 0,
                        symbol: planePath,
                        symbolSize: 15
                    },
                    lineStyle: {
                        normal: {
                            color: color[i],
                            width: 1,
                            opacity: 0.6,
                            curveness: 0.2
                        }
                    },
                    data: convertData(item[1])
                }, {
                    name: item[0] + '',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            formatter: function (par) {
                                return par.value[2] + '家'
                                // console.log(par);
                            }
                        }
                    },
                    symbolSize: function (val) {
                        return val[2] / 8;
                    },
                    itemStyle: {
                        normal: {
                            color: color[i]
                        }
                    },
                    data: item[1].map(function (dataItem) {
                        return {
                            name: dataItem[1].name,
                            value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                        };
                    })
                });
            });

            option = {
                visualMap: {
                    left: '50px',
                    bottom: '50px',
                    min: 10,
                    max: 100,
                    textStyle: {
                        color: '#fff'
                    },
                    color: [
                        '#2FCA71', '#FF8516'
                    ],
                    calculable: true
                },

                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {

                        if (params.seriesIndex == 2 || params.seriesIndex == 5 || params.seriesIndex == 8) {
                            return params.name + ':' + params.data.value[2];
                        }
                        return params.data.fromName + '>' + params.data.toName

                    }
                },

                geo: {
                    map: 'aks',

                    roam: true,
                    label: {
                        normal: {
                            show: true,
                            fontSize: 16,

                            textStyle: {
                                fontSize: 18,
                                color: '#32FFC7',
                            },

                        },
                        emphasis: {
                            textStyle: {
                                fontSize: 18,
                                color: '#32FFC7',
                            },
                        }
                    },
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                fontSize: 18,
                                textStyle: {
                                    fontSize: 18
                                },
                            },
                            textStyle: {
                                fontSize: 18
                            },
                            show: true,
                            areaColor: 'rgba(3,179,254,.3)',
                            borderColor: '#52FFFD',
                            borderWidth: 2
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 18,
                                textStyle: {
                                    fontSize: 18
                                },
                            },
                            textStyle: {
                                fontSize: 18
                            },
                            areaColor: 'rgba(50,197,255, 0.5)'
                        }
                    },
                },
                series: series
            };

            myChart.setOption(option)
        }
    })


}